<template>
  <div class="index">
    <div class="columns banner">
      <div class="column is-12 header-container">
        <div class="columns">
          <div class="column">
            <div class="columns header">
              <div class="column is-2">
                <router-link :to="{name: 'Index'}">
                  <img src="../assets/images/logo.png" width="134px" height="50px" style="display: block;"/>
                </router-link>
              </div>
              <div class="column is-8 menu">
                <ul class="menu" v-show="category.length">
                  <li>
                    <router-link :to="{name: 'Index'}">首页</router-link>
                  </li>
                  <li v-for="(value, index) in category" :key="index">
                    <router-link :to="{name: 'List', params: {id: value.id}}">
                      {{ value.name }}
                    </router-link>
                  </li>
                  <li><router-link :to="{name: 'Page', params: {id: 67}}">关于我们</router-link></li>
                </ul>
              </div>
              <div class="column is-2">
                <button class="button is-primary header-button" @click="show=true">
                  获取解决方案
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-12 slogan-container animated fadeInDown">
        <div class="column is-12">
          <h1>应用程序与网页 集成化解决专家</h1>
        </div>
        <div class="column is-12">
          <p>Application and web integration expert</p>
        </div>
        <div class="column is-12">
          <button class="button is-primary header-button" @click="show=true">
            获取解决方案
          </button>
        </div>
      </div>
      <div class="column is-12 slogan-footer animated fadeInUp">
        <p>
          我们是一个从事行业多年的专业团队，<br>
          可帮助您创建最佳项目，从早期创意到最终落地
        </p>
        <button class="button is-small is-outlined is-rounded animated infinite pulse">了解更多</button>
      </div>
    </div>

    <!--service-->
    <div class="columns service">
      <div class="column is-12 header">
        <h1 class="title">提供一站式服务，让您项目快速启动，完美落地</h1>
        <span class="split">&nbsp;</span>
        <p>
          Provide one-stop service <br/>
          let your project start fast and perfect landing
        </p>
      </div>
      <div class="column is-12 grid">
        <div class="columns">
          <div class="column is-4" v-for="(media, index) in mediaServices" :key="index">
            <div class="grid-icon"><img :src="media.source_url"></div>
            <div class="grid-text">{{ media.title.rendered }}</div>
          </div>
        </div>
      </div>
    </div>

    <!--solution-->
    <div class="columns solution">
      <div class="column is-12 header">
        <h1 class="title">行业解决方案</h1>
        <span class="split">&nbsp;</span>
        <p>致力于技术与业务融合，帮助各行业互联网项目快速落地</p>
      </div>
      <div class="swiper-container solution-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(media, index) in mediaSolutions" :key="index">
            <div><img :src="media.source_url"></div>
            <p>{{ media.title.rendered }}</p>
          </div>

        </div>
        <!-- Add Pagination -->
        <div class="solution-pagination"></div>
      </div>
    </div>

    <!--case-->
    <div class="columns case">
      <div class="column is-12 header">
        <h1 class="title">案例展示</h1>
        <span class="split">&nbsp;</span>
        <p>已上线案例展示中心</p>
      </div>
      <div class="swiper-container case-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(media, index) in mediaCases" :key="index">
            <img :src="media.source_url">
          </div>
        </div>
      </div>
    </div>

    <!--idea-->
    <div class="columns idea">
      <div class="column is-12 header">
        <h1 class="title">服务流程理念</h1>
        <span class="split">&nbsp;</span>
        <p>尊重客户，理解客户，持续提供超越客户期望的产品与服务，做客户永远的伙伴</p>
      </div>
      <div class="column is-12 dots_wrapper">
        <Dots></Dots>
      </div>
    </div>

    <!--news-->
    <div class="columns news">
      <div class="column is-12 header">
        <h1 class="title">业界资讯</h1>
        <span class="split">&nbsp;</span>
        <p>提供更新，更全的业界资讯，助力你了解行业</p>
      </div>
      <div class="contents">
        <div v-for="(value, index) in news" :key="index">
          <router-link :to="{name: 'Post', params: {id: value.id}}">
            <img :src="(value['_embedded'] && value['_embedded']['wp:featuredmedia'] && value['_embedded']['wp:featuredmedia'][0].source_url)
            || placeholder" alt="image">
            <p>{{ value.title.rendered }}</p>
          </router-link>
        </div>
      </div>
    </div>

    <!--footer-->
    <div class="columnss footer">
      <div class="service">
        <div>
          <h1>免费咨询解决方案</h1>
          <div style="margin-top: 10px;">
            <div class="field">
              <p class="control">
                <input class="input" type="name" maxlength="8" placeholder="输入您的称呼">
              </p>
            </div>
            <div class="field">
              <p class="control">
                <input class="input" type="phone" maxlength="11" placeholder="输入您的手机号码">
              </p>
            </div>
            <div class="field">
              <p class="control">
                <button class="button is-primary" @click="postComment">免费咨询</button>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="contact">
        <div>
          <div><img src="../assets/images/logo.png" width="134px" height="50px"/></div>
        </div>
      </div>
    </div>

    <vodal :show="show" animation="flip" @hide="show = false" :height="300" :width="600">
      <div style="margin-top: 10px; padding: 20px;">
        <h1 style="font-size: 24px; margin-bottom: 20px;">免费咨询解决方案</h1>

        <div class="field">
          <p class="control">
            <input v-model="name" class="input" type="name" maxlength="8" placeholder="输入您的称呼">
          </p>
        </div>

        <div class="field">
          <p class="control">
            <input v-model="phone" class="input" type="phone" maxlength="11" placeholder="输入您的手机号码">
          </p>
        </div>

        <div class="field">
          <p class="control">
            <button class="button is-primary" @click="postComment">免费咨询</button>
          </p>
        </div>
      </div>
    </vodal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import request from './../request'

import Dots from '@/components/dots/index.vue'
import Vodal from 'vodal'

import './index.scss'
import 'vodal/common.css'
import 'vodal/flip.css'

import placeholder from './../assets/images/placeholder.png'

Vue.component(Vodal.name, Vodal)

@Component({
  components: {
    Dots
  }
})
export default class Index extends Vue {
  show: boolean = false
  name: string = ''
  phone: string = ''
  placeholder: string = placeholder

  category: any[] = []
  mediaServices: any[] = []
  mediaSolutions: any[] = []
  mediaCases: any[] = []
  news: any[] = []

  // noinspection JSUnusedGlobalSymbols
  // noinspection JSMethodCanBeStatic
  created() {
    request.getMediaByCategory({ categories: 6 }).then(responseMedia => {
      this.mediaServices = responseMedia.data
    })

    request.getCategory().then(responseCategory => {
      this.category = responseCategory.data
    })
  }

  // noinspection JSUnusedGlobalSymbols
  // noinspection JSMethodCanBeStatic
  async mounted() {
    const responseSolutions = await request.getMediaByCategory({
      categories: 7
    })
    this.mediaSolutions = responseSolutions.data
    this.$nextTick(() => {
      new Swiper('.solution-container', {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false
        },
        slidesPerView: 3,
        spaceBetween: 20,
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.solution-pagination',
          clickable: true
        }
      })
    })

    const responseCases = await request.getMediaByCategory({
      categories: 8
    })
    this.mediaCases = responseCases.data
    this.$nextTick(() => {
      new Swiper('.case-container', {
        slidesPerView: 4,
        spaceBetween: 20,
        loop: true,
        autoHeight: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.case-pagination',
          clickable: true
        }
      })
    })

    const news = await request.getPostsByCategory({
      _embed: true,
      categories: 3
    })
    this.news = news.data
  }

  postComment() {
    if (this.name === '' || this.phone === '') {
      alert('请输入您的称呼与手机号码')
      return
    }
    request
      .postComment({
        post: 53,
        author_name: this.name,
        content: this.phone
      })
      .then(response => {
        alert('提交成功，我们稍后会与您联系。')
        this.show = false
      })
      .catch(error => {
        if (error.toString().indexOf('409')) {
          alert('联系方式已提交，请勿重复提交')
        }
      })
  }
}
</script>
